<template>
  <div class="content" ref="tableList">
    <el-popover
      width="100%"
      placement="bottom"
      trigger="click"
      :disabled="disabled"
      v-model="showTree"
    >
      <el-input
        style="width: 100%"
        :disabled="disabled"
        slot="reference"
        placeholder="请筛选"
        v-model="keyWord"
        :suffix-icon="showTree ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
        @click.native="deptogglePanel($event)"
        size="small"
        @input="wordChange"
      >
        <span
          v-if="selectList.length > 0"
          slot="prepend"
          style="display: flex;"
        >
          <span
            class="dataSpan"
            v-for="(item, index) in selectList.slice(0, limit)"
            :key="item.refColumn"
          >
            <span :title="item.showColumn">
              {{ item.showColumn }}
            </span>
            <i
              class="el-icon-close tagClose"
              @click.stop="delMSelect(index)"
            ></i>
          </span>
          <span class="dataSpan" v-if="selectList.length > limit"
          >+{{ selectList.length - limit }}</span
          >
        </span>
        <!-- <span v-if="!multiple && selectList.length > 0" slot="prepend">
        <span> {{ selectList[0].showColumn }}</span>
      </span> -->
      </el-input>
      <div v-loading="loading" class="treeDiv">
        <div v-if="dataList.length === 0">
          <el-empty description="暂无数据"></el-empty>
        </div>
        <div v-else>
          <el-table
            v-if="isShowTable"
            ref="refTable"
            :data="dataList"
            @row-click="clickDataItem"
            max-height="250px"
          >
            <el-table-column width="55">
              <template slot-scope="scope">
                <el-checkbox
                  @change="clickDataItem(scope.row)"
                  :value="isSelected(scope.row)"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              v-for="(key, value, index) in Columns"
              :key="index"
              :prop="value"
              :label="key"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </el-table>
          <ul v-else class="greyscroll" style="max-height: 250px">
            <li
              class="dataItem"
              :class="{ selected: isSelected(item) }"
              v-for="item in dataList"
              :key="item.refColumn"
              @click="clickDataItem(item)"
            >
              {{ item.showColumn }}
            </li>
          </ul>
        </div>
        <div class="pagin" v-if="total > 10">
          <el-pagination
            small
            layout="prev, pager, next, total"
            :page-size="pageSize"
            :total="total"
            :current-page="pageNumber"
            @current-change="page"
          >
          </el-pagination>
        </div>
      </div>
    </el-popover>
  </div>
</template>
<script>
  import { refColumn } from "@/api/auth.js";
  export default {
    props: {
      url: {
        type: String,
        required: true
      },
      value: {
        default: null
      },
      // 是否多选
      multiple: {
        default: true
      },
      // 分页每页数量
      pageSize: {
        default: 10
      },
      // 内部对象关键字
      refColumn: {
        type: String,
        required: true
      },
      // 左边最多显示的个数
      limit: {
        type: Number,
        default: 3
      },
      // 是否只读
      disabled: {
        default: false
      }
    },
    data() {
      return {
        keyWord: "",
        dataList: [], // 数据list
        showTree: false,
        selectTableId: "", //  table选中行id
        pageNumber: 1,
        total: 0,
        selectList: [],
        Columns: [],
        loading: false,
        isShowTable: false
      };
    },
    watch: {
      value: {
        handler(value) {
          this.exchangeValue(value);
        },
        deep: true,
        immediate: true
      },
      showTree: {
        handler(value) {
          if (value === false) {
            this.updateName();
          }
        }
      }
    },
    // mounted() {
    //   this.getList();
    // },
    methods: {
      // 回显方式
      exchangeValue(value) {
        if (value) {
          refColumn(this.url, this.refColumn, "", "", "", value).then(res => {
            this.selectList = res.data.dataList;
            this.isShowTable = Object.keys(res.data.title).length > 1;
            // if (!this.multiple) {
            //   this.$nextTick(() => {
            //     this.$refs.moviesTable.setCurrentRow(this.selectList[0]);
            //   });
            // }
          });
        } else {
          this.selectList = [];
        }
      },
      isSelected(item) {
        return this.selectList.some(x => x.refColumn == item.refColumn);
      },
      page(page) {
        this.pageNumber = page;
        this.getList();
      },
      clickDataItem(item) {
        // 是否已经包含当前数据
        if (this.selectList.some(x => x.refColumn == item.refColumn)) {
          if (this.multiple) {
            this.selectList = this.selectList.filter(
              j => j.refColumn != item.refColumn
            );
          } else {
            this.selectList = [];
          }
        } else {
          if (this.multiple) {
            this.selectList.push(item);
          } else {
            this.$set(this.selectList, 0, item);
          }
        }
        this.$emit("change", this.selectList.map(x => x.refColumn).toString());

        // this.updateName();
      },
      updateName() {
        this.$emit("input", this.selectList.map(x => x.refColumn).toString());
      },
      delMSelect(index) {
        if (this.disabled) {
          return;
        }
        this.selectList.splice(index, 1);
        if (this.selectList.length === 0) {
          this.value = undefined;
        }else {
          this.value = this.selectList;
        }
        this.updateName();
      },
      wordChange() {
        this.$devTools.debounce(() => {
          this.getList();
        }, 500);
      },
      getList() {
        this.loading = true;
        refColumn(
          this.url,
          this.refColumn,
          this.pageNumber,
          this.pageSize,
          this.keyWord
        ).then(res => {
          this.total = res.data.total;
          this.Columns = res.data.title;
          this.isShowTable = Object.keys(this.Columns).length > 1;
          this.dataList = res.data.dataList;
          // if (this.isShowTable && this.selectList.length > 0) {
          //   if (this.selectList.length > 0) {
          //     this.$nextTick(() => {
          //       const list = this.dataList.filter(item => {
          //         return this.selectList.some(x => x.refColumn == item.refColumn);
          //       });
          //       if (this.multiple) {
          //         list.forEach(row => {
          //           this.$refs.refTable.toggleRowSelection(row);
          //         });
          //       } else {
          //         if (list.length > 0) {
          //           this.$refs.refTable.setCurrentRow(list[0]);
          //         }
          //       }
          //     });
          //   } else {
          //     console.log(1);
          //   }
          // }
          this.loading = false;
        });
      },
      // 表格css
      getCellStyle() {
        return "text-align:center; ";
      },
      getHeaderCellStyle() {
        return "background: rgba(9, 37, 56,0.1);text-align:center; background: linear-gradient(to bottom,#ffffff 0,#eeeeee 100%);padding: 4px 5px;";
      },
      // 点击input 阻止冒泡 控制table显示隐藏
      deptogglePanel(event) {
        if (this.disabled) {
          return;
        }
        // event || (event = window.event);
        // event.stopPropagation
        //   ? event.stopPropagation()
        //   : (event.cancelBubble = true);
        // this.showTree ? this.tableHide() : this.tableShow();
        this.getList();
      }
      // tableShow() {
      //   this.showTree = true;
      //   this.getList();
      //   document.addEventListener("click", this.tableHideList, false);
      // },
      // tableHide() {
      //   this.showTree = false;
      //   this.updateName();
      //   document.addEventListener("click", this.tableHideList, false);
      // },
      // tableHideList(e) {
      //   console.log(
      //     this.$refs.tableList && !this.$refs.tableList.contains(e.target)
      //   );
      //   if (this.$refs.tableList && !this.$refs.tableList.contains(e.target)) {
      //     this.tableHide();
      //   }
      // }
      // 点击table节点
    }
  };
</script>
<style scoped lang="scss">
  .content {
    position: relative;

    ::v-deep .el-input-group__prepend {
      background-color: #ffffff;
      padding: 0 10px 0 4px;
    }

    ::v-deep .el-input__inner {
      min-width: 100px;
    }

    /* ::v-deep .el-input-group--prepend .el-input__inner {
      border-left: none;
    } */
  }

  ::v-deep .noPadd .el-popover {
    padding: 0;
  }

  .treeDiv {
    min-width: 100%;
    overflow: auto;
    background-color: #ffffff;
    box-sizing: border-box;
    margin: -11px;
    min-width: 300px;
  }

  .dataItem {
    font-size: 14px;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #606266;
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
    cursor: pointer;

    &:hover {
      background-color: #eee;
    }
  }

  .selected {
    color: #1890ff;
    background-color: #ffffff;
  }

  .pagin {
    background-color: #ffffff;
  }

  .dataSpan {
    background-color: #f4f4f5;
    border-color: #e9e9eb;
    color: #909399;
    margin: 2px 0 2px 6px;
    height: 20px;
    padding: 0 5px;
    line-height: 19px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    display: flex;
    align-items: center;
    span {
      display: inline-block;
      max-width: 100px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .tagClose {
    font-size: 12px;
    cursor: pointer;

    &:hover {
      color: #fff;
      background-color: #909399;
      border-radius: 50%;
    }
  }
</style>
